
<template>
  <div class="home">
    <el-row class="header_top">
      <el-col :span="12" class="height_gao">
        <div class="grid-content bg-purple  height_gao">
          <el-button type="primary" class="subangffefnlei" plain @click="addclaur">添加轮播图</el-button>
        </div>
      </el-col>
      <el-col :span="12" class="height_gao">
        <div class="grid-content bg-purple-light height_gao">

        </div>
      </el-col>
    </el-row>

    <div class="autd animated slideInRight">
      <el-table :data="datatitle" style="width: 100%" v-loading="loading2" element-loading-text="拼命加载中" ref="profile"
                class='animated slideInRight'>
        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="position" label="广告展示位置" width="180">
        </el-table-column>
        <el-table-column prop="class_name" label="图片" width="400">
          <template slot-scope="scope">
            <img :src="yuming+scope.row.photo" class="guanggao_img"/>
          </template>
        </el-table-column>
        <el-table-column prop="link" label="点击图片ID" width="150">
        </el-table-column>
        <el-table-column prop="link" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="updateclass(scope.row,scope.$index)" type="warning" plain>修改</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="link" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="deleteclass(scope.row,scope.$index)" type="danger" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="cur"
        :page-size="pagesize"
        :page-count="currentPage4"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <el-dialog
      title="操作"
      :visible.sync="dateadvertisement"
      width="30%">
      <span>是否删除--{{imgtext}}--广告位</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dateadvertisement = false">取 消</el-button>
    <el-button type="primary" @click="submitimg">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog :title="fentitle" :visible.sync="dialogFormVisible">
      <el-form class="el_class">
        <form :action='urlimg+addclass_' id="aasd" method="post" enctype="multipart/form-data" target="id_iframe">
          <el-form-item label="广告展示位置" :label-width="formLabelWidth">
            <input class="" name="id" :value="guang_id" style="display:none;"/>
            <select name="position" class="swle_">
              <option  value="轮播图">手机端轮播图</option>
              <option value="PC轮播图">PC轮播图</option>
              <option  value="PC商品详情广告">PC商品详情广告</option>
              <option  value="PC轮播图右侧广告">PC轮播图右侧广告</option>
              <option  value="PC欧西森推荐">PC欧西森推荐</option>
              <option  value="PC好货">PC好货</option>
              <option  value="PC特色推荐">PC特色推荐</option>
              <option  value="PC商品详情广告">PC商品详情广告</option>
              <option  value="小程序为您推荐">小程序为您推荐</option>
            </select>
          </el-form-item>
          <el-form-item label="广告图片" :label-width="formLabelWidth">
            <img :src="aimg" ref="img_" alt="" class="el_img"/>
            <input ref="list" @change="onFileChange($event)" type='file' name="photo" accept='image/jpeg image/x-png'
                   class="pic_add"/>
          </el-form-item>
          <el-form-item label="图片链接ID" :label-width="formLabelWidth">
            <input class="ll_input" name="link" :value="GGlink"/>
          </el-form-item>
          <button type="submit" class="ll_button" @click="submitclassimg"> 确 定</button>
        </form>
      </el-form>
      <iframe id="id_iframe" name="id_iframe" style="display:none;"></iframe>
    </el-dialog>
  </div>
</template>
<script>
  import  img from  "~/timg.jpg";
  export default {
    components: {},
    data(){
      return {
        pagesize: this.$store.state.attribute.page, //每页条数
        urlimg: this.$DN,
        yuming: this.$IMG,
        addclass_: 'createad?Authorization='+this.$store.state.attribute.token,//api 路由
        total: 1, //总条数
        currentPage4: 1, //总页数
        cur: 1, //当前页数
        loading2: false,
        Temporary: [],  //总数据
        datatitle: [],  //当页数据

        dialogFormVisible: false,
        dateadvertisement: false,
        fentitle: "",
        form: {
          pid: '',//上级
          name: '',//名称
          img: '',//
          sort: "",//排序
        },
        formLabelWidth: '120px',
        imgarr: {},
        imgtext: "",
        rowindex: '',
        guang_id:0, //广告位ID
        img,
        GGlink:'',//广告链接id
        aimg: '',//广告位图片
      }
    },
    methods: {
      addclaur(){//添加轮播图

        this.addclass_= 'createad?Authorization='+this.$store.state.attribute.token;//api 路由
        this.guang_id = '';
        this.GGlink = ''
        this.aimg =  this.img;


        this.dialogFormVisible = true;
        this.fentitle = "添加广告位";
      },
      bodyimg(){
        this.http.post({
          'api': 'getaddata',
          'data': {
            'data': {}
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
            this.shuju(res.data.data)
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err,this);;
          }
        })
      },
      updateclass(e,i){  //修改广告
        this.addclass_= 'updatead?Authorization='+this.$store.state.attribute.token;//api 路由
        this.guang_id = e.id;
        this.GGlink = e.link;
        this.aimg =  this.yuming+e.photo;
        this.dialogFormVisible = true;
        this.fentitle = "修改广告位";
      },
      deleteclass(e, i){  //点击删除

        this.dateadvertisement = true;
        this.imgarr = e;
        this.imgtext = e.position
        this.rowindex = i;
//        console.log(i)
      },
      submitimg(){  //删除

        this.http.post({
          'api': 'delad',
          'data': {
            'data': {
              "adid": this.imgarr.id
            }
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
            this.$h.dataSuccess(res.data,this)
            this.datatitle.splice(this.rowindex, 1);
            this.dateadvertisement = false;
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err,this);;
          }
        })
      },
      handleCurrentChange(val) { //分页
        this.cur = val;
        this.datatitle = this.Temporary.slice((val - 1) * this.pagesize, val * this.pagesize);
      },
      onFileChange(e) {
        var URL = window.URL || window.webkitURL;
        var imgURL = URL.createObjectURL(e.target.files[0]);
        var img_url = e.target;
        const isLt2M = img_url.files[0].size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('或者上传头像图片大小不能超过 2MB!');
        } else {
          this.aimg = imgURL;
        }
      },
      submitclassimg(){
        this.update();
      },
      update(){
        setTimeout(() => {
          var d = window.frames["id_iframe"];
          if (d) {
            var dataall = JSON.parse(d.document.getElementsByTagName('pre')[0].innerHTML);
            this.$h.dataSuccess(dataall,this);
            this.dialogFormVisible = false;
            this.bodyimg();
          } else {
            this.update();
          }
        }, 1000);
      },
      shuju(dataall) {
        this.Temporary = dataall;
        this.loading2 = false;
        this.total = this.Temporary.length * 1; //数据总的条数
        this.currentPage4 = Math.ceil(this.total / this.pagesize); //总的条数 除 每页条数
        this.datatitle = this.Temporary.slice(0, this.pagesize);
      },
    },
    watch: {},
    computed: {
      //计算属性
    },
    mounted(){
//      console.log(this.$store.state.attribute.yuming);
      this.bodyimg();
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .guanggao_img {
    display: block;
    width: 53%;
    height: 53px;
    margin: auto;
  }

  .el_img {
    width: 200px;
    height: 200px;
    display: block;
    background-size: 100% 100%;
  }
  .swle_{
    width: 160px;
    height: 33px;
    background: white;
    border-radius: 2px;
  }

  .ll_input {
    -webkit-appearance: none;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 1;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }

  .el_class {
    width: 70%;
    display: block;
    margin: auto;
  }

  .ll_button {
    margin-left: 80%;
    width: 96px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;

    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #409EFF;
    border-color: #409EFF;
  }
</style>
